/* 全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
}

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 导航栏样式 */
.header-sticky {
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.9);
}

/* 卡片悬停效果 */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按钮样式 */
.btn-primary {
    @apply bg-primary text-white font-medium rounded-lg transition-all hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/30;
}
.btn-secondary {
    @apply bg-secondary text-white font-medium rounded-lg transition-all hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-secondary/30;
}
.btn-outline {
    @apply border border-light-2 text-dark-2 font-medium rounded-lg transition-all hover:bg-light-1 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
}

/* 商品卡片 */
.product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition-all hover:shadow-md;
}
.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}
.product-actions {
    @apply absolute bottom-0 left-0 right-0 p-4 bg-white/90 backdrop-blur-sm opacity-0 transform translate-y-4 transition-all;
}

/* 加载动画 */
.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary;
}

/* 通知动画 */
.notification-enter {
    animation: slideIn 0.3s ease forwards;
}
.notification-exit {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}    